<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:body>
        <ui:composition template="./../template/main.xhtml">
            <ui:define name="content">
                <h1 class="title ui-widget-header ui-corner-all">QUẢN LÝ NHÀ SẢN XUẤT</h1>
                <p:growl id="messages"/>
                <p:outputPanel deferred="true">
                    <h:form>
                        <p:commandButton id="btnInsert" action="#{manufacturerController.resetSelectedManufacturer()}" update=":insertForm" oncomplete="PF('insertDialog').show()" icon="ui-icon-disk" title="Thêm" value="Thêm"/>
                    </h:form>
                    <!-- Data Table -->
                    <h:form id="formDataTable">
                        <p:dataTable style="text-align: center" id="manufacturerForm" var="manufacturer" value="#{manufacturerController.manufacturerList}" paginator="true" rows="10" 
                                     paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}" rowsPerPageTemplate="5,10,15" 
                                     emptyMessage="Không tìm thấy nhà sản xuất nào...">
                            <!-- Id -->
                            <p:column headerText="Id" sortBy="#{manufacturer.id}">
                                <p:outputLabel value="#{manufacturer.id}"/>
                            </p:column>
                            <!-- Name -->
                            <p:column headerText="Tên" sortBy="#{manufacturer.name}" filterBy="#{manufacturer.name}">
                                <p:outputLabel value="#{manufacturer.name}"/>
                            </p:column>
                           
                            <!-- Actions -->
                            <p:column headerText="Chức năng">
                                <p:commandButton id="btnUpdate" update=":updateForm" oncomplete="PF('updateDialog').show()" icon="ui-icon ui-icon-wrench" title="Sửa">
                                    <f:setPropertyActionListener value="#{manufacturer}" target="#{manufacturerController.selectedManufacturer}"/>
                                </p:commandButton>
                                <p:commandButton id="btnDelete" update=":deleteForm" oncomplete="PF('confirmation').show()" icon="ui-icon-close" title="Xóa">
                                    <f:setPropertyActionListener value="#{manufacturer}" target="#{manufacturerController.selectedManufacturer}"/>
                                </p:commandButton>
                            </p:column>
                        </p:dataTable>  
                    </h:form>
                    <!-- Insert -->
                    <h:form id="insertForm">
                        <p:dialog header="Thêm" widgetVar="insertDialog" resizable="false" showEffect="fade" hideEffect="explode" modal="true">
                            <p:panelGrid columns="2">
                                <!-- Name -->
                                <p:outputLabel for="name" value="Tên:"/>
                                <p:inputText id="name" value="#{manufacturerController.selectedManufacturer.name}" required="true"/>
                                
                                <!-- Actions -->
                                <f:facet name="footer">
                                    <center>
                                        <p:separator/>
                                        <p:commandButton id="btnInsert" actionListener="#{manufacturerController.insert()}" update=":formDataTable, :messages" oncomplete="insertDialog.hide();" icon="ui-icon-check" title="Thêm" value="Thêm"/>
                                        <p:commandButton id="btnCancel" oncomplete="insertDialog.hide();" icon="ui-icon-cancel" title="Hủy" value="Hủy"/>
                                    </center>
                                </f:facet>
                            </p:panelGrid>
                        </p:dialog>  
                    </h:form>
                    <!-- Update -->
                    <h:form id="updateForm">
                        <p:dialog header="Sửa" widgetVar="updateDialog" resizable="false" showEffect="fade" hideEffect="explode" modal="true">
                            <p:panelGrid columns="2">
                                <!-- Name -->
                                <p:outputLabel for="name" value="Tên:"/>
                                <p:inputText id="name" value="#{manufacturerController.selectedManufacturer.name}" required="true"/>
                                
                                <!-- Actions -->
                                <f:facet name="footer">
                                    <center>
                                        <p:separator/>
                                        <p:commandButton id="btnUpdate" actionListener="#{manufacturerController.update()}" update=":formDataTable, :messages" oncomplete="updateDialog.hide();" icon="ui-icon-check" title="Cập nhật" value="Cập nhật"/>
                                        <p:commandButton id="btnCancel" oncomplete="updateDialog.hide();" icon="ui-icon-cancel" title="Hủy" value="Hủy"/>
                                    </center>
                                </f:facet>
                            </p:panelGrid>
                        </p:dialog>
                    </h:form>
                    <!-- Delete -->
                    <h:form id="deleteForm">
                        <p:confirmDialog closable="false" showEffect="fade" hideEffect="explode" severity="alert" widgetVar="confirmation" message="Bạn có muốn xóa nhà sản xuất này?" header="Xóa" style="margin: 5px auto;">
                            <h:panelGroup layout="block" style="text-align: right">
                                <p:commandButton value="Đồng ý" action="#{manufacturerController.delete()}" oncomplete="confirmation.hide();" update=":formDataTable, :messages"/>
                                <p:commandButton value="Hủy" oncomplete="confirmation.hide();"/>
                            </h:panelGroup>
                        </p:confirmDialog>
                    </h:form>
                </p:outputPanel>
            </ui:define>
        </ui:composition>
    </h:body>
</html>